<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Netty-Websocket</title>
    <script type="text/javascript" th:src="@{/js/jquery-3.5.0.js}"></script>
</head>
<body>
<label>发送人ID:</label>
<input type="text" id="userId"/><input type="button" value="连接websocket" onClick="connect()"/> <br/>
<label>接收人ID:</label>
<input type="text" id="receiveId" name="接收人ids"/>
<br/>
<textarea id="msgText" rows="10" cols="100"></textarea>
<input type="button" value="发送ws消息" onClick="sendMsg()"/>
<br/>
<input type="file" id="file" name="文件发送">
<input type="button" value="发送文件" onClick="sendFile()"/>
<img id="img" src="">
<hr color="black"/>
<h3>服务端返回的应答消息</h3>
<textarea id="responseText" style="width: 1024px;height: 300px;"></textarea>
<input type="button" value="清空消息" onClick="clean()"/>

<script type="text/javascript">

    // by zhengkai.blog.csdn.net
    var socket;

    function connect() {
        if (!window.WebSocket) {
            window.WebSocket = window.MozWebSocket;
        }
        if (window.WebSocket) {
            //建立socket链接
            socket = new WebSocket("ws://localhost:9999/ws?userId=1");
            //收到消息事件处理
            socket.onmessage = function (event) {
                var ta = document.getElementById('responseText');
                ta.value += event.data + "\n";
            };
            //连接成功事件处理
            socket.onopen = function (event) {
                var ta = document.getElementById('responseText');
                ta.value = "Netty-WebSocket服务器。。。。。。连接成功 用户ID：" + $('#userId').val() + "\n";
            };
            //连接关闭事件处理
            socket.onclose = function (event) {
                var ta = document.getElementById('responseText');
                ta.value = "Netty-WebSocket服务器。。。。。。关闭 \n";
            };
            socket.onerror = function (ev) {
                console.log(ev)
            }
        } else {
            alert("您的浏览器不支持WebSocket协议！");
        }
    }

    var message = {
        "sendId": "",
        "receiveId": "",
        "msg": "",
        "sendTime": ""
    }

    function sendMsg() {
        if (!window.WebSocket) {
            return;
        }
        message.sendId = $('#userId').val();
        message.receiveId = $('#receiveId').val();
        message.msg = $('#msgText').val();
        message.sendTime = Date.now();
        var json = JSON.stringify(message);
        console.log("发送内容长度：" + json.length)
        socket.send(json);
    }

    function sendFile() {
        if (!window.WebSocket) {
            return;
        }
        var inputElement = document.getElementById("file");
        var fileList = inputElement.files;
        for (var i = 0; i < fileList.length; i++) {
            var reader = new FileReader();
            reader.readAsArrayBuffer(fileList[i]);
            reader.onload = function loaded(evt) {
                var binaryString = evt.target.result;
                console.log("发送二进制数据")
                console.log(binaryString)
                socket.send(binaryString);
            }
        }
    }

    function clean() {
        var ta = document.getElementById('responseText');
        ta.value = " ";
    }

</script>
</body>
</html>